<template>
  <div
    class="flex w-full flex-1 flex-col overflow-hidden"
    ref="tableWrapRef"
    :style="style"
  >
    <Table
      :data-source="dataSource"
      :columns="columns"
      :pagination="false"
      class="screen-table"
      sticky
      :scroll="{ y: tableHeight }"
      :custom-row="
        (record, index) => ({
          class: index % 2 != 0 ? 'table-row' : '',
        })
      "
    >
    </Table>
  </div>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useElementSize } from '@vueuse/core';
import { Table } from 'ant-design-vue';

const tableWrapRef = ref();

const { height } = useElementSize(tableWrapRef);

const tableHeight = computed(() => height.value - 40);
const style = computed(() => {
  return {
    ['--table-height']: tableHeight.value + 'px',
  };
});

defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="scss" scoped>
:deep(.ant-table-body) {
  height: var(--table-height) !important;
}
</style>
